<template>
  <div id="app">
    <div class="tab">
      <span :class="current == 1 ? 'active' : 'tab_item'" @click="fchangeTab(1)"
        >第一个相机</span
      >
      <span :class="current == 2 ? 'active' : 'tab_item'" @click="fchangeTab(2)"
        >第二个相机</span
      >
    </div>
    <div class="box">
      <el-row :gutter="20" class="border_b">
        <el-col :span="8">
          <div class="top_l">
            <img :src="url" alt srcset />
          </div>
        </el-col>
        <el-col :span="16">
          <div class="top_r">
            <img
              @click="fshowdialog(item)"
              :src="
                baseUrl +
                item.split('/')[0] +
                '/' +
                current +
                '/' +
                item.split('/')[1]
              "
              v-for="(item, index) in srcList"
              :key="index"
              alt
              srcset
              class="img"
            />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="b_left">
            <div id="barCharts" ref="barCharts"></div>
            <el-row :gutter="20">
              <el-col :span="14">
                每
                <el-input-number
                  v-model="num"
                  @change="handleChange"
                  :min="1"
                  :max="100"
                  label="间隔"
                ></el-input-number
                >秒
              </el-col>
              <el-col :span="10">
                <el-button
                  type="primary"
                  @click="fshow"
                  style="margin-left: 10px"
                  >自动显示最后一张图片</el-button
                >
              </el-col>
            </el-row>

            <!-- <el-button type="primary" @click="fclear">清除定时器</el-button> -->
          </div>
        </el-col>
        <el-col :span="16">
          <div class="b_right">
            <div>
              <el-date-picker
                v-model="dateArr"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
              <el-button
                type="primary"
                @click="fgetLinedata"
                style="margin-left: 10px"
                >查询</el-button
              >
            </div>
            <div id="lineCharts" ref="lineCharts"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="图片" :visible.sync="dialogVisible" width="60%">
      <el-row :gutter="20">
        <el-col :span="8">
          <img :src="bigurl" alt srcset class="bigImg" />
        </el-col>
        <el-col :span="16">
          <div id="dialogCharts" ref="dialogCharts">hhh</div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fclose">取 消</el-button>
        <el-button type="primary" @click="fclose">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      dialogVisible: false,
      current: 1,
      baseUrl: this.$baseUrl,
      // baseUrl: "",
      num: 5,
      url: "",
      srcList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.getTime() -
                  start.getHours() * 60 * 60 * 1000 -
                  start.getMinutes() * 60 * 1000 -
                  start.getSeconds() * 1000 -
                  start.getMilliseconds()
              );
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "前5分钟",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 5 * 60 * 1000);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "前10分钟",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 10 * 60 * 1000);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "前20分钟",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 20 * 60 * 1000);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "前半小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 0.5);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "前1小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "前12小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 12);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateArr: "",
      options: [
        {
          label: "最后5分钟",
          value: 5,
        },
        {
          label: "最后10分钟",
          value: 10,
        },
      ],
      lineData: [],
      barData: [],
      timer: null,
      barXdata: [],
      lineYdata: [],
      lineXdata: [],
      allData: [],
      bigurl: "", //图片放大
    };
  },
  mounted() {
    this.fgetdata();
    this.fgetLinedata();
    this.timer = setInterval(() => {
      this.fgetdata();
    }, this.num * 1000);
    // window.addEventListener()  image_path:E:\张建\particle3.1\particle3\images\2023\2023-04    image_path+
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  },
  methods: {
    // 数据清空
    freset() {
      this.barXdata = [];
      this.lineYdata = [];
      this.lineXdata = [];
      this.lineData = [];
      this.barData = [];
      this.srcList = [];
      this.url = "";
    },
    // tab切换
    fchangeTab(i) {
      this.current = i;
      this.freset();
      this.dateArr = [];
      this.$echarts.init(this.$refs.barCharts).dispose();
      this.fclear();
      this.fgetdata();
      this.$echarts.init(this.$refs.lineCharts).dispose();
      this.fgetLinedata();
      this.allData = [];
      this.timer = setInterval(() => {
        this.fgetdata();
      }, this.num * 1000);
    },
    // 修改定时器时间
    handleChange() {
      this.fclear();
      this.timer = setInterval(() => {
        this.fgetdata();
      }, this.num * 1000);
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("barCharts"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "照片上的颗粒分布",
        },
        tooltip: {},
        legend: {
          data: ["比列"],
        },
        xAxis: {
          data: this.barXdata,
        },
        yAxis: {},
        series: [
          {
            name: "比列",
            type: "bar",
            data: this.barData,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    drawLineChart() {
      let myChart2 = this.$echarts.init(document.getElementById("lineCharts"));
      // 指定图表的配置项和数据
      let option2 = {
        title: {
          text: "颗粒分布线图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.lineYdata,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.lineXdata,
          nameRotate: 10,
          axisLabel: {
            //x轴文字的配置
            show: true,
            interval: 0, //使x轴文字显示全
            rotate: 45,
          },
        },
        yAxis: {
          type: "value",
        },
        series: this.lineData,
      };
      // 折线图的点击事件
      myChart2.setOption(option2);
      myChart2.on("click", (params) => {
        let selectData = this.allData[params.dataIndex];
        this.barData = [
          selectData.prop0,
          selectData.prop1,
          selectData.prop2,
          selectData.prop3,
          selectData.prop4,
        ];
        this.url =
          this.baseUrl +
          selectData.img_id.split("/")[0] +
          "/" +
          this.current +
          "/" +
          selectData.img_id.split("/")[1];
        this.fclear();
        this.drawChart();
      });
      window.addEventListener("resize", () => {
        myChart2.resize();
      });
    },
    // 查询
    fgetLinedata() {
      // 接口请求数据 后重新绘图
      this.lineYdata = [];
      this.lineXdata = [];
      this.lineData = [];
      this.srcList = [];
      this.allData = [];
      axios({
        method: "get",
        url: this.$requesturl + "/particles/query",
        params: {
          camera_id: this.current,
          start: this.dateArr && this.dateArr.length > 0 ? this.dateArr[0] : "",
          end: this.dateArr && this.dateArr.length > 0 ? this.dateArr[1] : "",
        },
      }).then((res) => {
        // console.log("数据：", res);
        let resData = res.data.result;
        this.allData = resData.distributes;
        var p;
        if (resData.distributes.length > 0) {
          // 缩略图
          this.srcList = resData.distributes.map((item) => {
            return item.img_id;
          });
          this.lineXdata = resData.distributes.map((item) => {
            return item.create_time;
          });
          p = {
            0: resData.distributes.map((item) => {
              return item.prop0;
            }),
            1: resData.distributes.map((item) => {
              return item.prop1;
            }),
            2: resData.distributes.map((item) => {
              return item.prop2;
            }),
            3: resData.distributes.map((item) => {
              return item.prop3;
            }),
            4: resData.distributes.map((item) => {
              return item.prop4;
            }),
          };
        } else {
          p = {
            0: [],
            1: [],
            2: [],
            3: [],
            4: [],
          };
        }
        this.lineYdata = resData.titles;

        for (let i = 0; i < this.lineYdata.length; i++) {
          let obj = {
            name: this.lineYdata[i],
            data: p[i],
            type: "line",
          };
          this.lineData.push(obj);
        }
        this.drawLineChart();
        // this.$echarts.init(this.$refs.lineCharts).dispose(); //删除之前绘画的实例
      });
    },
    // 柱状图请求数据
    fgetdata() {
      axios({
        method: "get",
        url: this.$requesturl + "/particles/get_last_distribute",
        params: {
          camera_id: this.current,
        },
      }).then((res) => {
        // console.log("数据：", res);
        let resData = res.data.result;
        this.barXdata = resData.titles;
        if (resData.distribute) {
          this.barData = [
            resData.distribute.prop0,
            resData.distribute.prop1,
            resData.distribute.prop2,
            resData.distribute.prop3,
            resData.distribute.prop4,
          ];
          let imageId = resData.distribute.img_id;
          this.url =
            this.baseUrl +
            imageId.split("/")[0] +
            "/" +
            this.current +
            "/" +
            imageId.split("/")[1];
          console.log("url:", this.url);
        } else {
          this.barData = [];
        }
        this.$echarts.init(this.$refs.barCharts).dispose(); //删除之前绘画的实例
        this.drawChart();
      });
    },
    fclear() {
      this.timer && clearInterval(this.timer); // 清除定时器
    },
    fshow() {
      this.$echarts.init(this.$refs.barCharts).dispose();
      this.timer = setInterval(() => {
        this.fgetdata();
      }, this.num * 1000);
    },
    fshowdialog(img) {
      this.dialogVisible = true;
      this.bigurl =
        this.baseUrl +
        img.split("/")[0] +
        "/" +
        this.current +
        "/" +
        img.split("/")[1];
      let chartData = this.allData.filter((item) => {
        return img == item.img_id;
      });
      console.log(chartData);
      let arr = [];
      chartData.forEach((item) => {
        arr.push(item.prop0);
        arr.push(item.prop1);
        arr.push(item.prop2);
        arr.push(item.prop3);
        arr.push(item.prop4);
      });
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      this.$nextTick(() => {
        let myChart = this.$echarts.init(
          document.getElementById("dialogCharts")
        );
        // 指定图表的配置项和数据
        let option = {
          title: {
            text: "照片上的颗粒分布",
          },
          tooltip: {},
          legend: {
            data: ["比列"],
          },
          xAxis: {
            data: this.barXdata,
          },
          yAxis: {},
          series: [
            {
              name: "比列",
              type: "bar",
              data: arr,
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        window.addEventListener("resize", () => {
          myChart.resize();
        });
      });
    },
    fclose() {
      this.dialogVisible = false;
      this.$echarts.init(this.$refs.dialogCharts).dispose();
      this.bigurl = "";
    },
  },
};
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  display: flex;
  width: 99vw;
  height: 100vh;
  flex-direction: column;
  .border_b {
    border-bottom: 1px solid #ccc;
  }
  .tab {
    flex: 0 0 60px;
    text-align: center;
    span {
      display: inline-block;
      padding: 10px 20px;
      cursor: pointer;
    }
    .active {
      background: #3d98f4;
      color: #fff;
    }
  }
  .box {
    flex: 1;
  }
  .top_l {
    // width: 900px;
    height: calc((100vh - 62px) / 2);
    // padding: 20px;
    box-sizing: border-box;
    text-align: center;
    border-right: 1px solid #ccc;
    img {
      width: 20vw;
      height: 30vh;
      margin: 10px 0;
    }
  }
  .top_r {
    // width: 1000px;
    height: calc((100vh - 62px) / 2);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: scroll;
    img {
      width: 100px;
      height: 100px;
      margin: 10px;
    }
  }
  .b_left {
    height: calc((100vh - 62px) / 2);
    // width: 900px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #ccc;
    #barCharts {
      width: 80%;
      height: calc((100vh - 100px) / 2);
      margin-top: 10px;
    }
  }
  .b_right {
    // width: 1000px;
    height: calc((100vh - 62px) / 2);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    .select {
      margin-right: 10px;
    }
    #lineCharts {
      width: 90%;
      height: calc((100vh - 150px) / 2);
      margin-top: 10px;
    }
  }
  .bigImg {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
}
* {
  margin: 0;
  padding: 0;
}

#dialogCharts {
  width: 600px;
  height: 300px;
}
</style>
